<template>
	<view class="Recommend bg-color">
		<view class="Recommend-item">
			<image class="item-big" :src="recommendListDetial.floor_title.image_src"></image>
			<!-- <text>{{recommendListDetial.floor_title.name}}</text> -->
			<view class="item-small-box">
				<view class="item-small" v-for="item1 in recommendListDetial.product_list" :key="index">
					<image class="item-img" :src="item1.image_src"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['recommendListDetial'],
		data() {
			return {

			}
		},
		mounted(){
			// console.log(33333,this.recommendListDetial)
		}

	}
</script>

<style scoped>
	.Recommend {
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.Recommend-item {
		/* display: flex;
		flex-direction:column; */
		border-radius: 20rpx;
		border: 2rpx solid #CCCCCC;
		overflow: hidden;
		margin: 10rpx 0;
		background-color: white;
	}

	.item-big {
		margin-top: 10rpx;
		position: relative;
			left: 38%;
		width: 100%;
		height: 70rpx;
		/* display:inline-block; */
	}

.item-small-box{
	/* white-space:nowrap;
	overflow-x:auto;　　
	overflow-y:hidden; */
	display: flex;
}

	.item-small {
		
		width: 100%;
		height: 240rpx;

	}

	.item-img {
		width: 100%;
		height: 240rpx;
		/* display: flex;
		justify-content: space-around; */
	}
</style>
